<template>
    <div class="custom-title-bar">
        <div data-tauri-drag-region class="titlebar">
            <div class="titlebar-button" id="titlebar-minimize" @click="appWindow.minimize()">
                <el-icon><Minus /></el-icon>
            </div>
            <div class="titlebar-button" id="titlebar-maximize" @click="appWindow.toggleMaximize()">
                <el-icon><FullScreen /></el-icon>
            </div>
            <div class="titlebar-button" id="titlebar-close" @click="appWindow.close()">
                <el-icon><Close /></el-icon>
            </div>
        </div>
    </div>
</template>


<script setup>
import { Window } from '@tauri-apps/api/window';
const appWindow = new Window('main');
</script>

<style>
.custom-title-bar {
  width: 100%;
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.custom-title-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(
      45deg,
      #ff6b6b48 25%,
      #4ecdc448 25%,
      #4ecdc448 50%,
      #45b7d148 50%,
      #45b7d148 75%,
      #96c93d48 75%
  );
  background-size: 50% 100%;
  animation: waveFlow 4s linear infinite;
  transform: translate3d(0,0,0);
  z-index: -1;
}

.custom-title-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
      135deg,
      rgba(255,107,107,0.48) 25%,
      rgba(78,205,196,0.48) 25%,
      rgba(78,205,196,0.48) 50%,
      rgba(69,183,209,0.48) 50%,
      rgba(69,183,209,0.48) 75%,
      rgba(150,201,61,0.48) 75%
  );
  background-size: 50% 100%;
  animation: waveFlowReverse 5s linear infinite;
  transform: translate3d(0,0,0);
  z-index: -1;
}

@keyframes waveFlow {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes waveFlowReverse {
  0% { transform: translateX(0%); }
  100% { transform: translateX(50%); }
}
.titlebar {
  height: 30px;
  width: 100%;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.titlebar-button:hover {
  background: #00000048;
  color: #ffffff;
  font-size: 20px;
}
</style>